<script setup lang="ts">
import PanelGroup from './components/PanelGroup.vue'
import Tiao from './components/Tiao.vue'
import { ElRow, ElCol, ElCard, ElSkeleton,ElDivider} from 'element-plus'
import { Echart } from '@/components/Echart'
import { CountTo } from '@/components/CountTo'
import { pieOptions, barOptions, lineOptions } from './components/echarts-data'
import { ref, reactive } from 'vue'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { useI18n } from '@/hooks/web/useI18n'
import { kcsl,spsl,jrxz,zrxz,byxz,qall,zhexian } from '@/api/dashboard/analysis'

const { t } = useI18n()

const loading = ref(true)


let totalState = reactive({
  //商品总览
  kecheng: 0,
  shangpin: 0,
  //用户总览
  jinri: 0,
  zuori: 0,
  benyue: 0,
  all: 0
})

const getCount = async () => {
  const res = await kcsl();
  const res1 = await spsl();
  const res2 = await jrxz();
  const res3 = await zrxz();
  const res4 = await byxz();
  const res5 = await qall();
  if(res){
    totalState.kecheng = res.data
  }
  if(res1){
    totalState.shangpin = res1.data
  }
  if(res2){
    totalState.jinri = res2.data
  }
  if(res3){
    totalState.zuori = res3.data
  }
  if(res4){
    totalState.benyue = res4.data
  }
  if(res5){
    totalState.all = res5.data
  }
}
getCount();


const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption

// 课程统计 teacherSystem/selCurriculumCount
const getMonthlySales = async () => {
  const res = await zhexian().catch(() => {})
//FeedbackStatistics
  if (res){
     set(
          lineOptionsData,
          'xAxis.data',
          res.data.weekData
     )
      set(lineOptionsData, 'series', [
          {
            smooth: true,
            type: 'line',
            data: res.data.week,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          }
      ])
  }
}

const getAllApi = async () => {
  await Promise.all([getMonthlySales()])
  loading.value = false
}

getAllApi()
</script>

<template>
  <PanelGroup />
  <Tiao/>
  <ElRow :gutter="20" class="row-con">
    <ElCol :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
      <ElCard shadow="hover" class="mb-20px card" >
        <template #header>
          <div class="card-header">
            <span>商品总览</span>
          </div>
        </template>
        <div class="text item">
          <ElRow class="row-box">
            <ElCol :span="12">
              <ElSkeleton :loading="loading" animated :rows="2">
                <template #default>
                  <div :class="`${prefixCls}__item flex justify-center`">
                    <div class="flex flex-col justify-between">
                      <CountTo class="text-20px font-700 text-center" :start-val="0" :end-val="totalState.kecheng"/>
                      <El-Divider/>
                      <div :class="`${prefixCls}__item--text text-20px text-gray-1000 text-center`">课程数量(已上架)</div>
                    </div>
                  </div>
                </template>
              </ElSkeleton>
            </ElCol>
            <ElCol :span="12">
              <ElSkeleton :loading="loading" animated :rows="2">
                <template #default>
                  <div :class="`${prefixCls}__item flex justify-center`">
                    <div class="flex flex-col justify-between">
                      <CountTo class="text-20px font-700 text-center" :start-val="0" :end-val="totalState.shangpin"/>
                      <El-Divider/>
                      <div :class="`${prefixCls}__item--text text-20px text-gray-1000 text-center`">商品数量(已上架)</div>
                    </div>
                  </div>
                </template>
              </ElSkeleton>
            </ElCol>
          </ElRow>
        </div>
      </ElCard>
    </ElCol>
    <ElCol :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
      <ElCard shadow="hover" class="mb-20px card" >
        <template #header>
          <div class="card-header">
            <span>用户总览</span>
          </div>
        </template>
        <div>
          <ElRow :type="flex">
            <ElCol :span="6">
              <ElSkeleton :loading="loading" animated :rows="2">
                <template #default>
                  <div :class="`${prefixCls}__item flex justify-center`">
                    <div class="flex flex-col justify-between">
                      <CountTo class="text-20px font-700 text-center" :start-val="0" :end-val="totalState.jinri"/>
                      <El-Divider/>
                      <div :class="`${prefixCls}__item--text text-20px text-gray-1000 text-center`">今日新增</div>
                    </div>
                  </div>
                </template>
              </ElSkeleton>
            </ElCol>
            <ElCol :span="6">
              <ElSkeleton :loading="loading" animated :rows="2">
                <template #default>
                  <div :class="`${prefixCls}__item flex justify-center`">
                    <div class="flex flex-col justify-between">
                      <CountTo class="text-20px font-700 text-center" :start-val="0" :end-val=" totalState.zuori"/>
                      <El-Divider/>
                      <div :class="`${prefixCls}__item--text text-20px text-gray-1000 text-center`">昨日新增</div>
                    </div>
                  </div>
                </template>
              </ElSkeleton>
            </ElCol>
            <ElCol :span="6">
              <ElSkeleton :loading="loading" animated :rows="2">
                <template #default>
                  <div :class="`${prefixCls}__item flex justify-center`">
                    <div class="flex flex-col justify-between">
                      <CountTo class="text-20px font-700 text-center" :start-val="0" :end-val="totalState.benyue"/>
                      <El-Divider/>
                      <div :class="`${prefixCls}__item--text text-20px text-gray-1000 text-center`">本月新增</div>
                    </div>
                  </div>
                </template>
              </ElSkeleton>
            </ElCol>
            <ElCol :span="6">
              <ElSkeleton :loading="loading" animated :rows="2">
                <template #default>
                  <div :class="`${prefixCls}__item flex justify-center`">
                    <div class="flex flex-col justify-between">
                      <CountTo class="text-20px font-700 text-center" :start-val="0" :end-val="totalState.all"/>
                      <El-Divider/>
                      <div :class="`${prefixCls}__item--text text-20px text-gray-1000 text-center`">全部用户</div>
                    </div>
                  </div>
                </template>
              </ElSkeleton>
            </ElCol>
          </ElRow>
        </div>
      </ElCard>
    </ElCol>
    <ElCol :span="24">
      <ElCard shadow="hover" class="mb-20px card">
        <ElSkeleton :loading="loading" animated>
          <Echart :options="lineOptionsData" :height="350" />
        </ElSkeleton>
      </ElCard>
    </ElCol>
  </ElRow>
</template>
<style scoped>
  .row-con {
    display: flex;
    flex-flow: row wrap;
  }

  .row-con .card {
    height: 90%;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

</style>
